<template>
    <div id="map">
    </div>
    <div class="panel" style="left: 0;top: 0;">
        <el-card class="box-card">
            <el-radio-group v-model="tabPosition" @change="change">
                <el-radio-button label="Motorway">Motorway</el-radio-button>
                <el-radio-button label="A Road">A Road</el-radio-button>
                <el-radio-button label="B Road">B Road</el-radio-button>
                <el-radio-button label="Unclassified">Unclassified</el-radio-button>
            </el-radio-group>
            <div style="width: 400px;height: 400px;margin-top: 30px" id="myChart">
            </div>
            <div style="width: 400px;height: 400px;margin-top: 30px" id="myChart2">

            </div>
        </el-card>

    </div>
    <div class="panel" style="right: 0;bottom: 0;left:440px; position: fixed">
        <el-card class="box-card">
            <div style="height: 250px;width:50%;float: left;text-align: center;color: black;font-size: 14px" >
                <div style="width: 100%;line-height: 18px;font-size: 18px;padding-bottom: 10px">{{tabPosition}}</div>
                <div style="width: 100%;line-height: 18px">{{text}}</div>
            </div>
            <div id="myChart3" style="height: 250px;width:50%;float: left;"></div>
        </el-card>
    </div>
</template>

<script>
    import axios from "axios"
    import * as echarts from 'echarts'

    export default {
        name: 'App',
        data() {
            return {
                tabPosition: "Motorway",
                map: null,
                text: "",
                options:
                    {
                        'Motorway': {
                            text: "Motorways first came to Britain over three decades after the advent of the A-road numbering event, and as a result required a new numbering system. They were given an M prefix.Car speed limit is generally 70mph on motorways. There are very few accidents on motorways in the London area, accounting for only 1% of the volume of accidents in 9 years, but due to speed limits and traffic flow, the proportion of fatal accidents is the highest of all road types.",
                            data: [0.92, 8.17, 90.92]
                        }, 'A Road': {
                            text: "A-roads are the major through-routes, forming the basic network of main roads and arteries. The number of accidents on  A-roads is the largest, accounting for 67% of the total number of accidents in 9 years.The road conditions and speed limit on A-roads are second only to motorways.At the same time, the percentage of fatal car accidents of A-roads is second only to motorways",
                            data: [0.74, 11.70, 87.57]
                        }, 'B Road': {
                            text: "B-roads are a lower class of road, often of a poorer physical standard, and forming links within the framework of A-roads. The number of car accidents on B-roads accounted for 8% of the total number of car accidents in 9 years.The percentage of fatal car accidents on B-roads is less than that on A-roads.",
                            data: [0.69, 11.58, 87.74]
                        }, 'Unclassified': {
                            text: "Unclassified roads are  the minor roads that are left over - country lanes and city streets and they are not allocated with numbers in this scheme. Unclassified roads include a large part of local roads and community roads, and is generally considered to be the most road type in each city. The total number of accidents on unclassified roads is not large compared to the number of roads of  this class in London, accounting for 23% of the total number of accidents in 9 years.Vehicles driving on roads of this type are usually at low speeds, and the percentage of fatal car accidents on unclassified road. is the smallest",
                            data: [0.62, 11.37, 88.01]
                        }
                    }
                ,
            }
        },
        mounted() {
            mapboxgl.accessToken = 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZjF4ZzB3em4yd21pZmVqbHlleDAifQ.I9eqVjtotz7jaU7XcJm9pQ';
            let map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/dark-v9',
                bounds: [[-0.515681, 51.283617], [0.334266, 51.688150]]
            });
            this.map = map;
            const loading = this.$loading({
                lock: true,
                text: 'Data Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            map.on("load", () => {
                console.log("加载完成")
                    map.addSource("road", {
                        type: "geojson",
                        data: "data.geojson",
                    });
                    map.addLayer({
                        id: "road",
                        type: "line",
                        source: "road",
                        filter: ["==", "class", "Motorway"],
                        layout: {},
                        paint: {
                            "line-color": [
                                "case",
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "Motorway"
                                ],
                                "#FF0000",
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "A Road"
                                ],
                                "#FFFF00",
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "B Road"
                                ],
                                "#00FFFF",
                                "#f50ad2"
                            ],
                            'line-width': [
                                "case",
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "Motorway"
                                ],
                                5,
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "A Road"
                                ],
                                4,
                                [
                                    "==",
                                    [
                                        "get",
                                        "class"
                                    ],
                                    "B Road"
                                ],
                                3,
                                2
                            ],
                        }
                    });
                    loading.close();

            })
            this.initChart();
        },
        methods: {
            change(val) {
                if (val == "Motorway" || val == "A Road" || val == "B Road") {
                    this.map.setFilter("road", ["==", "class", val])
                } else {
                    this.map.setFilter("road", ["!in", "class", "Motorway", "A Road", "B Road"])
                }
                this.initChart3(this.options[val])
            },
            initChart() {
                let myChart = echarts.init(
                    document.getElementById("myChart")
                );
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    title: {text: "Number of Accidents on 4 Road Classes"},
                    xAxis: {
                        type: 'category',
                        data: ['Motorway', 'A Road', 'B Road', 'Unclassified'],
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [2290, 153706, 18965, 55209],
                        type: 'bar',
                        barWidth:30,
                        showBackground: true,
                        label: {
                            show: true,
                            position: 'top'
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                });
                let myChart2 = echarts.init(
                    document.getElementById("myChart2")
                );
                // 绘制图表
                myChart2.setOption({
                    title: {text: "Percentage of Fatal Accidents \non 4 Road Classes"},
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        // name:"Road Class",
                        // nameGap:25,
                        nameLocation: "center",
                        type: 'category',
                        data: ['Motorway', 'A Road', 'B Road', 'Unclassified'],
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: function (value, index) {
                                return value + '%';
                            }
                        }
                    },
                    series: [{
                        data: [0.92, 0.74, 0.69, 0.62],
                        type: 'line',
                        showBackground: true,
                        label: {
                            show: true,
                            position: 'top'
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                });
                this.initChart3(this.options["Motorway"]);
            },

            initChart3(data) {
                this.text = data.text;
                if (!this.myChart3) {
                    this.myChart3 = echarts.init(
                        document.getElementById("myChart3")
                    );
                }
                // 绘制图表
                this.myChart3.setOption({
                    color: ['#00BFFF'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    title: {text: "Accident Severity Percentage on \nMotorway/A-Road/B-Road/Unclassified-Road"},
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Fatal', 'Serious', 'Slight'],

                    },
                    series: [{
                        data: data.data,
                        type: 'bar',
                        barWidth:30,
                        showBackground: true,
                        label: {
                            show: true,
                            position: 'right'
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                });
            }
        }
    }
</script>
<style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #map {
        width: 100vw;
        height: 940px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .panel {
        z-index: 100;
        position: absolute;
    }

    .panel .el-card {
        background-color: rgba(255, 255, 255, 0.6);
        border: none;
    }
</style>
